<template>
    <el-container style="height: calc(100% - 66px);">
        <el-aside width="auto" style="padding: 20px 0 20px 20px; height: 100%;">
            <div class="ps-panel nav-left-menu main-menu" style="width: 64px; height: 100%;">
                <div class="ps-panel-head">
                    <i class="ps-panel-head-icon iconfont icon-link" style="display: none;"></i>
                    <span class="ps-panel-head-title" style="display: none;">数据组织</span>
                    <button type="button" class="iconfont icon-screen menuTensile ps-right"
                        v-on:click="menuTensile"></button>
                </div>

                <div class="ps-panel-body">
                    <el-menu :default-active="active" router class="el-menu-vertical" :collapse="isCollapse">
                        <el-submenu index="/connect/database" popper-class="menu1">
                            <template slot="title">
                                <i class="iconfont icon-database" style="color: #3378f7;"></i>
                                <span class="menu-title">
                                    <span class="ps-left">数据库</span>
                                    <i class="icon-tag ps-right">{{dbData.length}}</i>
                                </span>
                            </template>
                            <el-menu-item v-for="(item,index) in dbData" :key="index"
                                :index="'/connect/database?dicLabelAttId='+item.id">{{item.source_name}}</el-menu-item>
                        </el-submenu>

                        <el-menu-item index="#">
                            <i class="iconfont icon-excel" style="color: #23bf97;"></i>
                            <span slot="title">结构化信息源</span>
                        </el-menu-item>

                        <el-menu-item index="/connect/images?type=1">
                            <i class="iconfont icon-document" style="color: #fac751;"></i>
                            <span slot="title">态势文档</span>
                        </el-menu-item>

                        <el-menu-item index="/connect/images?type=2">
                            <i class="iconfont icon-document" style="color: #fac751;"></i>
                            <span slot="title">日志文档</span>
                        </el-menu-item>

                        <el-menu-item index="/connect/images?type=0">
                            <i class="iconfont icon-webpage" style="color: #f03d39;"></i>
                            <span slot="title">网页</span>
                        </el-menu-item>

                        <!--<el-menu-item index="/connect/images?type=image">-->
                        <!--<i class="iconfont icon-images" style="color: #f03d39;"></i>-->
                        <!--<span slot="title">图片</span>-->
                        <!--</el-menu-item>-->
                    </el-menu>
                </div>
            </div>
        </el-aside>
        <el-main>
            <router-view style="height: 100%; background-color: #fff; overflow: auto;"></router-view>
        </el-main>
    </el-container>
</template>

<script>
    import $ from 'jquery';

    export default {
        name: "connectApp",
        data() {
            return {
                isCollapse: true,
                active: '',
                dialogTableVisible: false,
                dbData: []
            };
        },
        methods: {
            menuTensile: function () {
                // eslint-disable-next-line
                let $navMenu = $('.main-menu');
                // eslint-disable-next-line
                this.isCollapse === true ? (
                        $($navMenu).css('width', '268px'),
                        $($navMenu).find('span').eq(0).css('display', 'block'),
                        $($navMenu).find('i').eq(0).css('display', 'block')
                    ) :
                    ($($navMenu).css('width', '64px'),
                        $($navMenu).find('span').eq(0).css('display', 'none'),
                        $($navMenu).find('i').eq(0).css('display', 'none')
                    );
                this.isCollapse = !this.isCollapse;
            },
            getIndex(index, num) {
                return num + '-' + index;
            }
        },
        mounted() {
            this.$store.dispatch('ajax', {
                url: 'api/converter/getTableName',
                method: 'get',
                data: {
                    page: 1,
                    number: 99
                },
                succeed: (res) => {
                    this.dbData = res.rows;

                    if (this.$route.path.indexOf('/connect/database') === 0 && res.rows.length > 1) {
                        if (Object.keys(this.$route.query).length > 0) {
                            this.active = decodeURIComponent(this.$route.fullPath);
                        } else {
                            this.active = '/connect/database?dicLabelAttId=' + res.rows[0].id;
                        }
                        this.$router.push({
                            path: this.active
                        });
                    }
                    if (this.$route.path.indexOf('/connect/images') === 0) {
                        this.active = '/connect/images?type=' + this.$route.query.type;
                        this.$router.push({
                            path: this.active
                        });
                    }
                }
            });
        }
    }
</script>
<style lang="less">
    .menu1 {
        width: 500px !important;
        height: 550px !important;
        overflow: auto;
    }
</style>